<template>
	<view class="page-forum">
		<view class="taxonomy " v-for="item in list" :key="item.id">
		  <view class="uni-flex uni-padding-wrap header">
				<view>{{ item.name }}</view>
		  </view>
		  <view class="forum-list">
				<view class="forum-box" v-for="(forum, forum_index) in item.forums" :key="forum.id" :data-id="forum.id" :data-name="forum.name" @tap="gotoForum">
					<view class="uni-flex desc-box">
						<view class="forum-name">{{ forum.name }}</view>
						<view v-if="forum.topic_count_today + forum.comment_count_today > 0" class="forum-stat highlight">今日：{{ forum.topic_count_today + forum.comment_count_today }}</view>
						<view v-if="forum.topic_count_today + forum.comment_count_today == 0" class="forum-stat text-muted">帖数：{{ forum.topic_count + forum.comment_count }}</view>
					</view>
				</view>
		  </view>
		</view>
	</view>
</template>

<script>
	import ListOptions from '../../minxins/list-options.js'
	export default {
		data() {
			return {
				
			};
		},
		mixins: [ListOptions],
		async onLoad(options) {
			this.options = Object.assign({}, this.options, options)
			let result = await this.fetchPageData()
			this.renderPage(result)
		},
		methods: {
			async fetchPageData() {
				let result = await this.$api.listForumTaxonomy(this.options)
				return result;
			},
			gotoForum(e) {
				let dataset = e.currentTarget.dataset;
				wx.navigateTo({
				  url: "/pages/forum-topic/forum-topic?fid=" + dataset.id + "&name=" + dataset.name
				})
			}
		}
	}
</script>

<style lang="scss">
.taxonomy {
  &:not(:last-child) {
    border-bottom: 10upx solid #eee;
  }
  .header {
    align-items: center;
    font-size: 60upx;
    font-weight: bold;
    padding-top: 20upx;
		padding-bottom: 20upx;
		border-bottom: 1px solid #eee;
    .iconfont {
      margin-right: 20upx;
    }
  }
	.forum-list {
		display: flex;
		flex-wrap: wrap;
		.forum-box {
			&:nth-child(2n+1) {
				border-right: 1px solid #eee;
			}
			border-bottom: 1px solid #eee;
			width: 50%;
			padding: 20upx 60upx;
			box-sizing: border-box;
			.desc-box {
				flex-direction: column;
				.forum-stat {
					font-size: 80%;
				}
				.highlight {
					color: #FFAE0E;
				}
			}
			
		}
	}
  
  
}
</style>
